<template>
  <div class="main_box">
    <CommonHeader title="重点关注任务"></CommonHeader>
    <div class="nav_wrap" style="overflow-x: hidden">
      <div>
        <div class="tit" style="width: 86px">状态：</div>
        <div class="content" style="width: 110px" @click="showStateSelect">
          <div style="max-width: 80px">{{ selectState }}</div>
          <i class="down"></i>
        </div>
      </div>
      <div v-if="query.level == 1">
        <div class="tit" style="width: 86px">责任领导：</div>
        <div class="content" style="width: 110px" @click="showPersonSelect">
          <div style="max-width: 80px">{{ selectPerson }}</div>
          <i class="down"></i>
        </div>
      </div>
      <!-- <div class="nav_content">
        <div class="nav_item" :class="queryInfo.state == '0' ? 'active' : ''" @click="changeNav('0')">
          待反馈
          <span class="red_point" v-show="count1 > 0">{{ count1 }}</span>
        </div>
        <div class="nav_item" :class="queryInfo.state == '1' ? 'active' : ''" @click="changeNav('1')">
          已反馈
          <span class="red_point" v-show="count2 > 0">{{ count2 }}</span>
        </div>
      </div> -->
    </div>
    <div class="main_list">
      <pull-refresh-list ref="PullRefreshList" :limit="queryInfo.size" :page-no.sync="queryInfo.current" :data.sync="dataList" @getList="initData">
        <div v-for="item in dataList" :key="item.index" class="declare_item" @click="toDetail(item)">
          <div class="content">
            <div>
              <div class="tit">{{ item.title }}</div>
              <div class="state" :class="item.checkStatus == 0 ? 'red' : 'blue'">
                {{ formateState(item.checkStatus) }}
              </div>
            </div>
            <div class="data">
              <img src="../../assets/image/green_tip.png" alt="" />
              <div>{{ item.greenCount }}</div>
              <img src="../../assets/image/red_tip.png" alt="" />
              <div>{{ item.redCount }}</div>
            </div>
          </div>
        </div>
      </pull-refresh-list>
    </div>
    <van-popup v-model="show" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="selectList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onConfirm" @cancel="cancel" />
    </van-popup>
    <van-popup v-model="personShow" round position="bottom" get-container="#app">
      <van-picker show-toolbar :columns="selectPersonList" confirm-button-text="确定" cancel-button-text="取消" @confirm="onPersonConfirm" @cancel="cancelPerson" />
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader';
import PullRefreshList from '@/components/PullRefreshList';
// import level1data from './level1data.js';
// import level2data from './level2data.js';

export default {
  // eslint-disable-next-line
  name: 'Feedback',
  components: {
    CommonHeader,
    PullRefreshList,
  },
  data() {
    return {
      show: false,
      queryInfo: {
        state: '', // 审核状态
        current: 1,
        size: 10,
        employeeId: '', // 查询的人员id  空就是当前登录人
      },
      query: {},
      count1: 0,
      count2: 0,
      dataList: [], // 列表数据实体
      selectList: [
        {
          text: '全部',
          value: '',
        },
        {
          text: '未查看',
          value: '0',
        },
        {
          text: '已查看',
          value: '1',
        },
      ],
      selectState: '全部',
      selectPerson: '',
      personShow: false,
      selectPersonList: [],
    };
  },
  computed: {
    formateState() {
      return function (state) {
        switch (state) {
          case 1:
            return '已查看';
          default:
            return '未查看';
        }
      };
    },
  },
  created() {
    this.getTotal();
    this.query = this.$route.query;
    this.selectPerson = this.query.name;
    this.getPerosonList();
    // this.queryInfo.state = this.$route.query.isOK || '0';
  },
  methods: {
    getPerosonList() {
      // selectPersonList
      this.$api
        .subordinateList({
          empId: sessionStorage.getItem('employId'),
        })
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            this.selectPersonList = [
              {
                text: this.query.name,
                value: '',
              },
            ];
            this.selectPersonList.push(
              ...res.data.map((v) => ({
                text: v.name,
                value: v.empId,
              }))
            );
          }
        });
    },
    changeNav(id) {
      this.queryInfo.state = id;
      this.$refs.PullRefreshList.onSearch();
    },
    onSearch() {
      this.$refs.PullRefreshList.onSearch();
    },
    getTotal() {
      // const params = {
      //   _gp: 'duties',
      //   _mt: 'feedbackCount',
      //   employId: sessionStorage.getItem('employId'),
      // };
      // this.$api.commonApi(params).then((res) => {
      //   if (res.errno === 200) {
      //     this.count1 = res.data.toBeFedBack || 0;
      //     this.count2 = res.data.fedBack || 0;
      //   }
      // });
    },
    initData(callback) {
      this.$api
        .lowLevelDutyList({
          checkStatus: this.queryInfo.state,
          employeeId: this.queryInfo.employeeId || sessionStorage.getItem('employId'),
        })
        .then((res) => {
          if (res.code === 200) {
            callback(res.data);
          } else {
            callback([]);
          }
        })
        .catch(() => {
          callback([]);
        });
      // const rows = this.$route.query.level == 1 ? level1data : level2data;
      // if (this.queryInfo.state == 0) {
      //   callback(rows);
      // } else {
      //   callback([]);
      // }
      // const params = {
      //     _gp: "duties",
      //     _mt: "list",
      //     employId: sessionStorage.getItem('employId'),
      //     feedbackStatus:this.queryInfo.state,
      //     page: this.queryInfo.current,
      //     limit: this.queryInfo.size
      // }
      // this.$api.commonApi(params).then(res=>{
      //     if(res.errno === 200){
      //         const rows = res.data.items
      //         if (callback) callback(rows)
      //     }else{
      //         callback([])
      //     }
      // })
    },
    toDetail(item) {
      this.$router.push({
        path: '/feedbackDetail',
        query: {
          ...item,
          id: item.id,
          searchPerson: this.queryInfo.employeeId,
          level: this.$route.query.level,
        },
      });
    },
    onConfirm(params) {
      this.queryInfo.state = params.value;
      this.selectState = params.text;
      this.show = false;
      this.$refs.PullRefreshList.onSearch();
    },
    showStateSelect() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },

    showPersonSelect() {
      this.personShow = true;
    },
    onPersonConfirm(params) {
      this.queryInfo.employeeId = params.value;
      this.selectPerson = params.text;
      this.personShow = false;
      this.$refs.PullRefreshList.onSearch();
    },
    cancelPerson() {
      this.personShow = false;
    },
  },
};
</script>

<style scoped>
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.nav_wrap {
  width: 100%;
  display: flex;
  margin-top: 10px;
  margin-bottom: 15px;
  /* background-color: #fff; */
}
.nav_wrap > div {
  display: flex;
}
.nav_wrap .tit {
  font-size: 13px;
  color: #999;
}
.nav_wrap .content {
  width: 94px;
  font-size: 13px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url('../../assets/image/down.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
.nav_content {
  width: 100%;
  display: flex;
}
.nav_content .nav_item {
  width: 49%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.nav_content .nav_item.active {
  color: #333;
}
.nav_content .nav_item.active::after {
  display: block;
  content: '';
  width: 50px;
  border-bottom: 2px solid #1b68eb;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -25px;
}
.nav_content .nav_item .red_point {
  display: block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #f60e36;
  border-radius: 50%;
  position: absolute;
  right: 50%;
  top: -2px;
  margin-right: -40px;
}
.main_list {
  width: 100%;
  min-height: calc(100vh - 145px);
  padding: 10px 15px;
  box-sizing: border-box;
}
.main_footer {
  width: 100%;
  height: 50px;
  font-size: 16px;
  position: fixed;
  left: 0;
  bottom: 0;
}
.main_footer >>> .van-button {
  width: 150px;
}
.declare_item .content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 15px;
}
.declare_item .content > div {
  display: flex;
  justify-content: space-between;
}
.declare_item .content > .data {
  justify-content: flex-start;
  margin-top: 6px;
}
.declare_item .content > .data img {
  width: 18px;
  margin-left: 5px;
}
.declare_item .content > .data div {
  margin-left: 5px;
}
.declare_item .icon {
  width: 18px;
  height: 18px;
  background: url('../../assets/image/right_arrow.png') no-repeat;
  background-size: 100% 100%;
}
.declare_item * {
  cursor: pointer;
}

.declare_item .tit {
  max-width: 200px;
  font-size: 15px;
  margin-right: 15px;
  text-align: left;
}
.declare_item .state {
  height: 20px;
  line-height: 20px;
  padding: 0 10px;
  background-color: #7f7f7f;
  color: #fff;
  font-size: 13px;
  border-radius: 5px;
}
.declare_item .state.red {
  background-color: #f60e36;
}
.declare_item .state.blue {
  background-color: #4ca5f1;
}
</style>